<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="__STATIC__/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="__STATIC__/css/content.css"/>
	<link rel="stylesheet" href="__STATIC__/css/header.css" />
	<link rel="stylesheet" href="__STATIC__/font-awesome/css/font-awesome.min.css">
	<script src="__STATIC__/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="__STATIC__/js/bootstrap.min.js"  type="text/javascript" charset="utf-8"></script>
	<script src="__STATIC__/js/common.js"  type="text/javascript" charset="utf-8"></script>
	<title></title>
	<style>
		.classify-bar{
			margin-left: 2%;
			margin-right: 2%;
			width: 96%;
			height: auto;
			background-color:#FFFFFF;
			border: solid 0px #333333;
			border-radius: 6px;
			box-shadow: 4px 4px 4px 4px gray;
		}
		.classify-type-bar{
			width: 100%;
			height: 44px;
			border-bottom: solid 2px gray;
		}
		.padding-left-right-24px{
			padding-left: 24px;
			padding-right: 24px;
		}
		.classify-course-bar{
			background-color: #FFFFFF;
			box-shadow: 4px 4px 4px 4px gray;
			border: solid 0px #333333;
			border-radius: 8px;
			margin-left: 2%;
			margin-right: 2%;
			width: 96%;
			height: auto;
		}
		.classify-type-msg{
			margin-left: 24px;
		}
		.classify-type-msg>a{
			color: #333333;
		}
		.classify-type-msg>a:hover{
			color: #12AA9C;
		}
		.classify-course-detail-bar{
		margin: 8px;
		height: 100px;
		width: 150px;
		border: solid 1px #000000;
		border-radius: 8px;
		background-color: #000000;
		}
		.course-detail-imgs{
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body class="content-background-color">
<div class="header">
	<div class="header-logo-bar">
		<div class="header-logo-msg">
			<!--<div class="logo">

            </div>
            <div class="logo">

            </div>-->
		</div>
		<div class="header-personal-message">
			<span><a href="#"></a></span>
			<span><a href="#"></a></span>
			<div class="profile-photo">
				<img src="__STATIC__/imgs/{$head_picture.picture}" alt="" class="profile-photo-size">
			</div>
		</div>
	</div>
	<div class="nav-bar">
		<ul class="nav">
			<a href="{:url('index/index/home')}">首页</a>
		</ul>
		<ul>
			<a href="#">前端</a>
			<ul class="plat">
				<li><a href="{:url('index/index/scourse')}?type=html">HTML</a></li>
				<li><a href="{:url('index/index/scourse')}?type=css">CSS</a></li>
				<li><a href="{:url('index/index/scourse')}?type=javascript">Javascript</a></li>
			</ul>
		</ul>
		<ul>
			<a href="#">后端</a>
			<ul class="plat">
				<li><a href="{:url('index/index/scourse')}?type=java">Java</a></li>
				<li><a href="{:url('index/index/scourse')}?type=c">c++</a></li>
				<li><a href="{:url('index/index/scourse')}?type=php">PHP</a></li>
				<li><a href="{:url('index/index/scourse')}?type=python">python</a></li>
			</ul>
		</ul>
		<ul>
			<a href="#">移动</a>
			<ul class="plat">
				<li><a href="{:url('index/index/scourse')}?type=ios">ios</a></li>
				<li><a href="{:url('index/index/scourse')}?type=android">Android</a></li>
			</ul>
		</ul>
		<ul>
			<a href="#">数据库</a>
			<ul class="plat">
				<li><a href="{:url('index/index/scourse')}?type=mysql">MySQL</a></li>
				<li><a href="{:url('index/index/scourse')}?type=sqlserver">SQLServer</a></li>
				<li><a href="{:url('index/index/scourse')}?type=oracle">Oracle</a></li>
			</ul>
		</ul>
	</div>
</div>
<div class="personal-msg">
	<div class="personal-msg-bar">
		<div class="personal-msg-profile-photo"><img src="__STATIC__/imgs/{$head_picture.picture}" alt="" class="profile-photo-size"></div>
		<div class="personal-msg-username"><span>{$username}</span></div>
	</div>
	<div class="personal-msg-order">
		<div class="personal-msg-btn"><a href="#">我的课程</a></div>
		<div class="personal-msg-btn"><a href="{:url('index/personal/personal')}">个人信息</a></div>
	</div>
	<div class="personal-msg-order">
		<div class="personal-msg-btn"><a href="#">最近浏览</a></div>
		<div class="personal-msg-btn"><a href="#" id="logout">退出登录</a></div>
	</div>
</div>
<div class="container-bar">
	<div class="guidance-box">
	<div class="guidance-bar row mt-3">
		<div class="guidance-bar-classify col-md-6"><div class="btn-style margin-left-24">分类</div></div>
			<div class="guidance-bar-search col-md-6 d-flex justify-content-around">
			<div class="guidance-btn-bar">
			<div class="btn-style"><a href=""></a></div>
			<div class="btn-style margin-left-24"><a href=""></a></div>
		</div>
		<div>
			<form action="{:url('index/index/searchCourse')}" method="post">
				<input type="text" id="search" name="search"  placeholder=""  class="height-100 width-256"/>
				<input type="submit" value="search"  class="common-btn-style height-100" />
			</form>
		</div>
			</div>
		</div>
	</div>
		<div class="classify-bar mt-3 d-flex flex-column">
			<div class="classify-type-bar  padding-left-right-24px d-flex align-items-center justify-content-start flex-wrap">
				<span>方向:</span>
			<div class="classify-type-msg">
				<a href="{:url('index/index/course')}">全部</a>
			</div>
			<div class="classify-type-msg">
				<a href="{:url('index/index/selectCourse')}?direction=前端">前端</a>
			</div>
			<div class="classify-type-msg">
				<a href="{:url('index/index/selectCourse')}?direction=后端">后端</a>
			</div>
			<div class="classify-type-msg">
				<a href="{:url('index/index/selectCourse')}?direction=移动">移动</a>
			</div>
			<div class="classify-type-msg">
				<a href="{:url('index/index/selectCourse')}?direction=数据库">数据库</a>
			</div>
		</div>
		<!--<div class="classify-type-bar  padding-left-right-24px d-flex align-items-center justify-content-start flex-wrap">-->
			<!--<span>分类:</span>-->
			<!--<div class="classify-type-msg">-->
				<!--<a href="">123</a>-->
			<!--</div>-->
			<!--<div class="classify-type-msg">-->
				<!--<a href="">123123</a>-->
			<!--</div>-->
		<!--</div>-->
		<!--<div class="classify-type-bar  padding-left-right-24px d-flex align-items-center justify-content-start flex-wrap">-->
			<!--<span>难度:</span>-->
			<!--<div class="classify-type-msg">-->
				<!--<a href="">1234</a>-->
			<!--</div>-->
			<!--<div class="classify-type-msg">-->
				<!--<a href="">412312</a>-->
			<!--</div>-->
		<!--</div>-->
	</div>
	<div class="classify-course-bar  mt-3 d-flex flex-wrap justify-content-start">
		{volist name="course" id="c" }
		<a href="{:url('index/index/detail')}?v={$c.video}"><div class="classify-course-detail-bar"><img src="__STATIC__/imgs/{$c.img}" alt="" class="course-detail-imgs"></div></a>
		{/volist}
	</div>
</div>
<dialog id="logout-bar" class="logout-bar mt-3 " >
	<div class="d-flex flex-column">
		<div class="d-flex justify-content-end">
			<button id="gg" class="close-btn"><i class="fa fa-times" aria-hidden="true"></i></button>
		</div>
		<div class="d-flex justify-content-center margin-top-20">
			<span>确认是否退出登录</span>
		</div>
		<div class="d-flex justify-content-around margin-top-20">
			<a href="" class="logout-btn">取消</a>
			<a href="{:url('index/index/logout')}" class="logout-btn">确定</a>
		</div>
	</div>
</dialog>
</body>
</html>
